{{extend 'layout.html'}}

{{rows=attendees}}

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{=settings.googlemap_key}}" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(0,0), 1);
        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var blueIcon = new GIcon();
        blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
        blueIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        blueIcon.iconSize = new GSize(37, 34);
        blueIcon.shadowSize = new GSize(37, 34);
        blueIcon.iconAnchor = new GPoint(9, 34);
        blueIcon.infoWindowAnchor = new GPoint(9, 2);
        blueIcon.infoShadowAnchor = new GPoint(18, 14);
        function createMarker(point, i, message) {
           // Set up our GMarkerOptions object
           if(i==0) markerOptions = { icon:blueIcon };
           else markerOptions= {}
           var marker = new GMarker(point, markerOptions);
           GEvent.addListener(marker, "click", function() {
             marker.openInfoWindowHtml(message);
           });
           return marker;
        }
        {{for row in rows:}}{{if row.latitude and row.longitude:}}
          var point = new GLatLng({{=row.latitude}},{{=row.longitude}});
//          map.addOverlay(createMarker(point, 0, "<a href=\"#a{{=row.id}}\">{{=(row.first_name+' '+row.last_name).replace('"',"'")}}</a>"));
          map.addOverlay(createMarker(point, 0, "{{=(row.first_name+' '+row.last_name+' @ '+row.institution_name+', '+row.institution_country).replace('"',"'")}}"));
        {{pass}}{{pass}}        
     }
    }
    //]]>
    </script>

    <script>
      load(); 
    </script>


<h2>Attendees</h2>

<script>
function open_profile(id,image) {
  jQuery('#profile'+id+' img').attr('src','{{=URL(r=request,f='download')}}/'+image);
  jQuery('#profile'+id).slideToggle();
  return false;
}
</script>

{{for a in attendees:}}
<div id='a{{=a.id}}' class="box">
  <a href="{{=a.web_page or '#'}}">{{="%(first_name)s %(last_name)s" % a}}</a> {{="%(institution_name)s %(institution_country)s" % a}}
  {{if a.profile_picture or a.short_profile:}}
  [<a href="#" onclick="return open_profile({{=a.id}},'{{=a.profile_picture}}')">profile</a>]
  {{pass}}
  {{if auth.user:}}[<a href="mailto:{{=a.email}}">email</a>]{{pass}}
  <table width="100%" class="profile hidden" id="profile{{=a.id}}">
    <tr>
      <td width="150px"><img src="" height="100px" /></td>
      <td>{{=a.short_profile}}</td>
    </tr>
  </table>
  <script>jQuery('#profile{{=a.id}}').hide();</script>
</div>
{{pass}}
